<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column v-for="(item, index) in columns" :key="index" v-bind="item">
        <template #default="scope">
          <span
            v-if="item.formatter"
            v-text="item.formatter(scope.row, scope.column, scope.row[item.prop], scope.$index)"
          ></span>
          <span
            v-else-if="!item.slots"
            v-text="
              scope.row[item.prop] ? scope.row[item.prop] : scope.row[item.prop] === 0 ? 0 : '-'
            "
          ></span>
          <slot v-else :record="scope" :name="item.slots.name" :index="index"></slot>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template #default="scope">
          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button
            type="text"
            v-if="props.benefitsType !== 3"
            :style="scope.row.status === 1 ? 'color: #f00' : ''"
            @click="handleStatus(scope.row)"
          >
            {{ scope.row.status === 1 ? '禁用' : '启用' }}
          </el-button>
          <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup lang="ts">
const props = defineProps<{
  columns?: any[]
  tableData?: any[]
  benefitsType?: number
}>()

const emit = defineEmits(['edit', 'changeStatus', 'delete'])

const handleEdit = (row: any) => {
  emit('edit', row, props.benefitsType)
}

const handleStatus = (row: any) => {
  emit('changeStatus', row, props.benefitsType)
}

const handleDelete = (row: any) => {
  emit('delete', row, props.benefitsType)
}
</script>
<style scoped></style>
